<template>
  <div>
    <el-dialog :title="title" width="30%" :visible.sync="visible" @close="resetForm">
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="角色名称：" prop="roleName">
          <el-input v-model="formData.roleName" placeholder="请输入角色名称" clearable />
        </el-form-item>
        <el-form-item label="所属类型：" required>
          <el-select
            v-model="type_status"
            placeholder="请选择所属类型"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="(item, index) in TypeStatus"
              :key="index"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色描述：" prop="description">
          <el-input
            v-model.trim="formData.description"
            type="textarea"
            placeholder="请输入角色描述"
            :maxlength="150"
            show-word-limit
            :autosize="{ minRows: 5 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button type="primary" @click="handelConfirm"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'AddRoleDialog',
  props: {
    roleData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '添加角色',
      formData: {
        roleName: '',
        description: ''
      },
      rules: {
        roleName: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 20,
            message: '4-20个字符'
          }
        ],
        description: [
          {
            max: 150,
            message: '150个字符以内'
          }
        ]
      },
      TypeStatus: [
        {
          id: '',
          label: '平台管理员'
        }
      ],
      type_status: ''
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  watch: {},
  created() {
    this.getDetail()
  },
  mounted() {},
  methods: {
    // 新增
    async add() {
      const { status, msg } = await this.$http.system.role.add(this.formData)
      if (status === 200) {
        this.$message.success('添加成功')
        this.$emit('update:dialogVisible', false)
        this.$emit('getList')
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑
    async updated() {
      const { status, msg } = await this.$http.system.role.update({
        ...this.formData,
        id: this.roleData.id
      })
      if (status === 200) {
        this.$message.success('编辑成功')
        this.$emit('update:dialogVisible', false)
        this.$emit('getList')
      } else {
        this.$message.error(msg)
      }
    },
    // 获取详情
    async getDetail() {
      if (!this.roleData.id) return
      this.title = '编辑角色'
      for (const key in this.formData) {
        this.formData[key] = this.roleData[key]
      }
    },
    resetForm() {
      this.$emit('update:dialogVisible', false)
      this.$refs['elForm'].resetFields()
      this.$emit('update:roleData', {})
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.loading = true
        if (this.roleData.id) {
          this.updated()
        } else {
          this.add()
        }
        this.loading = false
      })
    }
  }
}
</script>
<style></style>
